/**
 * 文档工具栏组件
 */

import React, { useCallback } from 'react';
import {
  Search,
  CloudUpload,
  X,
} from 'lucide-react';
import { useDocument } from '@/contexts/document';
import type{  SortField, SortOrder } from '@/types/document';

interface DocumentToolbarProps {
  onUpload?: () => void;
  className?: string;
}

export default function DocumentToolbar({ onUpload, className = '' }: DocumentToolbarProps) {
  const { 
    filter,
    sort,
    pagination,
    selection,
    updateFilter,
    updateSort
  } = useDocument();


  // 搜索处理
  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const search = e.target.value;
    updateFilter({ search });
  }, [updateFilter]);

  // 清空搜索
  const handleClearSearch = useCallback(() => {
    updateFilter({ search: '' });
  }, [updateFilter]);





  return (
    <div className={`bg-card border-b border-border ${className}`}>
      {/* 主工具栏 */}
      <div className="px-4 py-3 flex items-center justify-between">
        {/* 左侧：搜索和筛选 */}
        <div className="flex items-center space-x-3 flex-1">
          {/* 搜索框 */}
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <input
              type="text"
              placeholder="搜索文档标题、描述..."
              value={filter.search}
              onChange={handleSearchChange}
              className="w-full pl-10 pr-10 py-2 border border-input rounded-lg text-sm bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
            />
            {filter.search && (
              <button
                onClick={handleClearSearch}
                className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-foreground"
              >
                <X className="w-4 h-4" />
              </button>
            )}
          </div>


        </div>

        {/* 右侧：排序、视图切换、上传 */}
        <div className="flex items-center space-x-3">
          {/* 排序下拉菜单 */}
          <div className="relative">
            <select
              value={`${sort.sortBy}-${sort.sortOrder}`}
              onChange={(e) => {
                const [sortBy, sortOrder] = e.target.value.split('-') as [SortField, SortOrder];
                updateSort({ sortBy, sortOrder });
              }}
              className="appearance-none bg-background border border-input rounded-lg px-3 py-2 pr-8 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
            >
              <option value="created_at-desc">创建时间 ↓</option>
              <option value="created_at-asc">创建时间 ↑</option>
              <option value="title-asc">名称 A-Z</option>
              <option value="title-desc">名称 Z-A</option>
              <option value="file_size-desc">大小 ↓</option>
              <option value="file_size-asc">大小 ↑</option>
            </select>
          </div>


          {/* 上传按钮 */}
          <button
            onClick={onUpload}
            className="flex items-center px-4 py-2 bg-primary text-primary-foreground text-sm rounded-lg hover:bg-primary-hover transition-colors"
          >
            <CloudUpload className="w-4 h-4 mr-2" />
            上传文档
          </button>
        </div>
      </div>



      {/* 统计信息 */}
      <div className="px-4 py-2 bg-muted border-t border-border text-xs text-muted-foreground">
        共 {pagination.total} 个文档
        {selection.selectedIds.length > 0 && (
          <span className="ml-4">
            已选择 {selection.selectedIds.length} 个文档
          </span>
        )}
      </div>
    </div>
  );
}
